﻿<div data-options="dxView : { name: 'training', title: 'Training' } " >
  <div class="training-view"  data-options="dxContent : { targetPlaceholder: 'content' } ">
    <div data-bind="dxToolbar: { items: [ 
    {  align: 'center', text: trainingDate },
    ] }" ></div>

    <!--div class="button" data-bind="dxButton:{text:'Show popup', clickAction:showPopup}"></div>
    <div data-bind="dxPopup:{visible:popupVisible, fullScreen:true}">
	    <div data-options="dxTemplate:{name: 'title'}">
	        <p>Popup title is <b data-bind="text: popupTitle"></b></p>
	        <p><span data-bind="dxCheckBox: { checked: buttonVisible }"></span>&nbsp;Show "Hide popup" button</p>
	    </div>
	    <div data-options="dxTemplate:{name: 'content'}">
	        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup, visible: buttonVisible }"></div>
	        <p>The popup contents.</p>
	    </div>
	   <div data-bind="dxList: { dataSource: sequences}">
	      <div data-options="dxTemplate : { name: 'item' }"
	      data-bind="text: name, dxAction: '#sequence/{id}'" ></div>    
	    </div>
    </div-->

    <!--div class="selectsequence" data-bind="dxLookup: { dataSource: sequences, displayExpr: 'name', valueExpr: 'id', value: selectedId, visible: lookupVisible, placeholder: 'Please, select sequence for training', valueChangeAction: processValueChange}"></div>
    <div class="dx-field">
        <div class="dx-field-label">Emploee ID</div>
        <div class="dx-field-value" data-bind="text: selectedId"></div>
    </div-->

    <div class = "sequence-center" data-bind="dxGallery: { height: 700, swipeEnabled: true, dataSource: dataSource, showNavButtons: true, visible: elementsVisible}">
    <h1 class = "pose-header" data-bind="text: duration"></h1>
	      <div data-options="dxTemplate: { name: 'item'}">
	        <h1 class = "pose-header" data-bind="text: name"></h1>
	        <img class = "pose-image" data-bind="attr: { src: url }" />
	        
	        <div class="dx-fieldset">
	        <table class="sequence-center">
	          <tr>
	            <td class="sequence-text sequence-label">Description: </td>
	            <td class="sequence-text">
	               <div data-bind="text: desc"/>
	            </td>
	          </tr>
	          <tr>
	            <td class="sequence-text sequence-label">Minumal duration: </td>
	            <td class="sequence-text">
	               <div id='durMin'data-bind="text: durMin"/>
	            </td>
	          </tr>
	          <tr>
	            <td class="sequence-text sequence-label">Maximal duration: </td>
	            <td class="sequence-text">
	               <div id='durMax'data-bind="text: durMax"/>
	            </td>
	          </tr>
	        </table>                 
	      </div>		
		<div id='textboxid'data-bind="dxTextBox:{value:id, visible:false}"></div>
    </div>
    </div>
    
    <div id="slider" data-bind="dxSlider:{min:0, max:100, value: 20, disabled:false}"></div> 
	<div class="startstop" data-bind="dxButton: { text: modeMessage, clickAction: startStop, width:'60%', visible: elementsVisible}"></div>
  
  </div>
</div>